<template>
    <el-container>
        <div class="head">
            <h5> 员工培训管理系统</h5>
            <br>
    <div class="index">
        <!--<h5> 员工培训管理系统</h5>-->
        <el-carousel height="250px" :interval="4000" type="card" >
            <el-carousel-item v-for="item in imgList" :key="item.id">
                <img :src="item.idView" class="image">
            </el-carousel-item>
        </el-carousel>
        <!--<div id="myChart" :style="{width:'400px', height: '300px'}"></div>-->
    </div>
    </div>
    <div class="main">
        <div class="left" align="left">
            <div id="myChart" :style="{width:'1000px', height: '350px'}"></div>
        </div>
        <div class="right">

        </div>
    </div>

   </el-container>
</template>

<script>
    import axios from "../utils/axios";
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    // import echarts from 'echarts'

    export default {
        name:'myChart',
    data() {
        return {
            imgList: [
                {id:0,idView:require("@/assets/imgs/01.jpg")},
                {id:1,idView:require("@/assets/imgs/03.jpg")},
                {id:2,idView:require("@/assets/imgs/04.jpg")},
                {id:3,idView:require("@/assets/imgs/05.jpg")}
            ],
            ceshi: "",
            // courseCount:[],
            data1:[],
            data2:[]
        };
    },
        mounted(){
            this.getCourseCount();
            // alert(this.data1.toString());
            // this.drawLine();
        },
        created() {
            // this.getCourseCount();
            // this.drawLine();
            // this.getCourseCount()
            // alert(document.getElementById("myChart"));
            // alert(1+this.getCourseCount());
            // alert(this.courseCount.+"s");
        },

        methods: {
            //统计选课人数
            getCourseCount(con) {
                axios({
                    method: "GET",
                    url: "/courseManage/queryCourseCount",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        // this.courseCount = res.data;
                        res.data.forEach((item,i) => {
                            console.log("forEach循环==i==",i);
                            console.log(item.courseName);
                            console.log(item.courseNumber);
                            this.data1.push(item.courseName);
                            this.data2.push(item.courseNumber);
                        });
                        this.ceshi=this.data1.toString();
                        console.log(this.ceshi);
                        this.drawLine();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '实时选课情况' },  //图表标题

                    tooltip: {},
                    xAxis: {
                        name: '课程名',     //x轴标题
                        data: this.data1,
                        // data: ["员工培训管理系统","自动化测试平台系统","公司框架培训","长沙电力工程侦察兵项目","员工培训管理系统","云商城系统","公司springcloud框架培训"] , ////x轴数据
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                            rotate:-15,//-15度角倾斜显示
                        },
                    },
                    yAxis: {
                        name: '选课人数',     //y轴标题
                        type: 'value',
                        minInterval: 1,
                    },
                    series: [{
                        type: 'bar',      //图表形状
                        //柱状图的颜色
                        itemStyle:{
                            normal:{
                                color:'#4ad2ff'
                            }
                        },
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                height: 24, //这里可以设置dataZoom的尺寸
                                bottom: 5,	//滚动体距离底部的距离
                                start: 1,  //初始化时，滑动条宽度开始标度
                                end: 20, //初始化时，滑动条宽度结束标度
                            },
                            {
                                type: "inside", //内置滑动，随鼠标滚轮展示
                                realtime: true,
                                start: 0,
                                end: 20,
                            },
                        ],
                        barWidth : 40,    //柱图宽度
                        data: this.data2,
                        // data: [120, 150, 80, 70, 110,35,46],  //图表数据
                    }]

                });
            }

    },



}
</script>

<!--<style scoped>-->
    <style lang="less" scoped>
        .el-container {
            width: 100%;
            height: 85vh;

            //   background-image: url("../../assets/imgs/bg2.jpeg");
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        .head {
            /*height: 7rem;*/
            background: #fff;
            height:40%;
            width: 100%;
            /*display: flex;*/
            /*justify-content: flex-start;*/
            align-items: center;
            /*padding-left: 40%;*/
            /*img {*/
                /*height: 3.5rem;*/
                /*margin-right: 2.5rem;*/
            /*}*/
            /*h3 {*/
                /*font-size: 2rem;*/
                /*vertical-align: middle;*/
                /*margin-top: 1rem;*/
                /*color: #1e439b;*/
                /*font-weight: 900;*/
            /*}*/
        }
   h5{
     font-size: 2rem;
   }

   .browBox ul {
       display: flex;
       flex-wrap: wrap;
       padding: 10px;
   }
   .browBox ul li {
       cursor: pointer;
       width: 10%;
       font-size: 26px;
       list-style: none;
       text-align: center;
   }
   /*走马灯样式开始*/
        .index{
            /*background: #c8cfd8;*/
            width: 80%;
            text-align: center;
            margin-left: 100px;
            width: 80.6%;

        }
   el-carousel__item h3 {
       color: #475669;
       font-size: 14px;
       opacity: 0.75;
       line-height: 150px;
       margin: 0;
   }

   .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
   }

   .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
   }
        img{
            width: 100%;
            height: inherit;
        }
   /*走马灯样式结束*/
</style>